<template>
  <div class="quick-booking">
    <!-- 页面标题 -->
    <div class="page-header">
      <Title level="2">快速预订</Title>
    </div>

    <div class="booking-container">
      <!-- 左侧房型列表 -->
      <div class="room-type-list">
        <Card title="房型列表" class="room-list-card">
          <div class="room-categories">
            <div class="category-item">
              <div class="category-title">标准双床房</div>
              <div class="room-codes">
                <span class="room-code">b83s</span>
                <span class="room-code">b84s</span>
                <span class="room-code">b85s</span>
              </div>
            </div>
            <div class="category-item">
              <div class="category-title">不标准双床房</div>
              <div class="room-codes">
                <span class="room-code">c100s</span>
                <span class="room-code">c101s</span>
                <span class="room-code">c102s</span>
              </div>
            </div>
            <div class="category-item">
              <div class="category-title">会议室</div>
              <div class="room-codes">
                <span class="room-code">hys101</span>
                <span class="room-code">hys102</span>
              </div>
            </div>
            <div class="category-item">
              <div class="category-title">双床房</div>
              <div class="room-codes">
                <span class="room-code">c103s</span>
                <span class="room-code">c104s</span>
                <span class="room-code">c105s</span>
              </div>
            </div>
          </div>
        </Card>
      </div>

      <!-- 右侧预订表单 -->
      <div class="booking-form">
        <Card title="订单信息" class="order-info-card">
          <Form :model="orderForm" layout="vertical">
            <Row :gutter="16">
              <Col :span="12">
                <Form.Item label="订单类型">
                  <Radio.Group v-model="orderForm.orderType">
                    <Radio value="individual">散客</Radio>
                    <Radio value="group">团队</Radio>
                  </Radio.Group>
                </Form.Item>
              </Col>
              <Col :span="12">
                <Form.Item label="入住类型">
                  <Radio.Group v-model="orderForm.checkInType">
                    <Radio value="fullDay">全天房</Radio>
                    <Radio value="hourly">钟点房</Radio>
                  </Radio.Group>
                </Form.Item>
              </Col>
            </Row>

            <Row :gutter="16">
              <Col :span="12">
                <Form.Item label="客源类型">
                  <Select
                    v-model="orderForm.guestSource"
                    placeholder="请选择客源类型"
                  >
                    <Select.Option value="individual">散客</Select.Option>
                    <Select.Option value="member">会员</Select.Option>
                    <Select.Option value="vip">VIP</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col :span="12">
                <Form.Item label="入住/离店日期">
                  <RangePicker
                    v-model="orderForm.dateRange"
                    :format="dateFormat"
                    style="width: 100%"
                  />
                </Form.Item>
              </Col>
            </Row>

            <Row :gutter="16">
              <Col :span="8">
                <Form.Item label="入住时间">
                  <TimePicker
                    v-model="orderForm.checkInTime"
                    format="HH:mm"
                    style="width: 100%"
                  />
                </Form.Item>
              </Col>
              <Col :span="8">
                <Form.Item label="价格策略">
                  <Select
                    v-model="orderForm.priceStrategy"
                    placeholder="请选择价格策略"
                  >
                    <Select.Option value="member">会员方案</Select.Option>
                    <Select.Option value="standard">标准方案</Select.Option>
                    <Select.Option value="discount">优惠方案</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col :span="8">
                <Form.Item label="离店时间">
                  <TimePicker
                    v-model="orderForm.checkOutTime"
                    format="HH:mm"
                    style="width: 100%"
                  />
                </Form.Item>
              </Col>
            </Row>

            <Row :gutter="16">
              <Col :span="12">
                <Form.Item label="预订时间">
                  <DatePicker
                    v-model="orderForm.reservationTime"
                    :show-time="true"
                    format="YYYY-MM-DD HH:mm"
                    style="width: 100%"
                  />
                </Form.Item>
              </Col>
              <Col :span="12">
                <Form.Item label="预订人">
                  <Input
                    v-model="orderForm.booker"
                    placeholder="请输入预订人的姓名"
                  />
                </Form.Item>
              </Col>
            </Row>

            <Row :gutter="16">
              <Col :span="12">
                <Form.Item label="联系电话">
                  <Input
                    v-model="orderForm.contactNumber"
                    placeholder="请输入预订人的手机号"
                  />
                </Form.Item>
              </Col>
              <Col :span="12">
                <Form.Item label="外部订单号">
                  <Input
                    v-model="orderForm.externalOrderNo"
                    placeholder="请输入第三方订房平台外部单号"
                  />
                </Form.Item>
              </Col>
            </Row>

            <Form.Item label="备注">
              <Input.TextArea
                v-model="orderForm.remarks"
                placeholder="请输入备注信息"
                :rows="3"
              />
            </Form.Item>
          </Form>
        </Card>

        <!-- 包价选择 -->
        <Card title="包价" class="package-card">
          <div class="package-list">
            <div class="package-item">
              <Checkbox v-model="orderForm.packages.breakfast1" />
              <span class="package-name">早餐 [2份]</span>
              <span class="package-price">总价¥40.00</span>
            </div>
            <div class="package-item">
              <Checkbox v-model="orderForm.packages.ticket12" />
              <span class="package-name">12套票 [1份]</span>
              <span class="package-price">总价¥200.00</span>
            </div>
            <div class="package-item">
              <Checkbox v-model="orderForm.packages.breakfast2" />
              <span class="package-name">早餐2人份 [1份]</span>
              <span class="package-price">总价¥20.00</span>
            </div>
            <div class="package-item">
              <Checkbox v-model="orderForm.packages.breakfast3" />
              <span class="package-name">早餐 [3份]</span>
              <span class="package-price">总价¥60.00</span>
            </div>
          </div>
        </Card>

        <!-- 房型信息 -->
        <Card title="房型信息" class="room-info-card">
          <Table
            :columns="roomColumns"
            :data-source="roomData"
            :pagination="false"
            size="small"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'roomType'">
                <div class="room-type-cell">
                  <IconifyIcon
                    :icon="
                      record.expanded
                        ? 'ant-design:minus-outlined'
                        : 'ant-design:plus-outlined'
                    "
                    class="expand-icon"
                    @click="toggleExpand(record)"
                  />
                  <span>{{ record.roomType }}</span>
                </div>
              </template>
              <template v-else-if="column.key === 'price'">
                <div class="price-cell">
                  <div class="price-main">¥{{ record.price }}</div>
                  <div class="price-original">¥{{ record.originalPrice }}</div>
                </div>
              </template>
              <template v-else-if="column.key === 'available'">
                <div class="available-cell">
                  <span class="available-count">{{ record.available }}</span>
                  <span v-if="record.oversell > 0" class="oversell-info">
                    (可超售数{{ record.oversell }})
                  </span>
                </div>
              </template>
              <template v-else-if="column.key === 'action'">
                <Button
                  :type="record.available > 0 ? 'primary' : 'default'"
                  :disabled="record.available <= 0"
                  size="small"
                  @click="selectRoom(record)"
                >
                  选房
                </Button>
              </template>
            </template>
          </Table>
        </Card>

        <!-- 操作按钮 -->
        <div class="action-buttons">
          <Button @click="handleCancel">取消</Button>
          <Button type="primary" @click="handleConfirm">确认</Button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { message } from 'ant-design-vue';
import {
  Button,
  Card,
  Checkbox,
  Col,
  DatePicker,
  Form,
  Input,
  Radio,
  RangePicker,
  Row,
  Select,
  Table,
  TimePicker,
  Typography,
} from 'ant-design-vue';
import { IconifyIcon } from '@vben/icons';
import dayjs, { Dayjs } from 'dayjs';

const { Title } = Typography;

// 日期格式
const dateFormat = 'YYYY-MM-DD';

// 订单表单数据
const orderForm = reactive({
  orderType: 'individual',
  checkInType: 'fullDay',
  guestSource: 'individual',
  dateRange: [dayjs(), dayjs().add(1, 'day')] as [Dayjs, Dayjs],
  checkInTime: dayjs('14:00', 'HH:mm'),
  priceStrategy: 'member',
  checkOutTime: dayjs('14:00', 'HH:mm'),
  reservationTime: dayjs(),
  booker: '',
  contactNumber: '',
  externalOrderNo: '',
  remarks: '',
  packages: {
    breakfast1: true,
    ticket12: true,
    breakfast2: true,
    breakfast3: true,
  },
});

// 房型表格列配置
const roomColumns = [
  {
    title: '房型名称',
    dataIndex: 'roomType',
    key: 'roomType',
    width: 200,
  },
  {
    title: '房价',
    dataIndex: 'price',
    key: 'price',
    width: 150,
  },
  {
    title: '可订数',
    dataIndex: 'available',
    key: 'available',
    width: 150,
  },
  {
    title: '预订数',
    dataIndex: 'booked',
    key: 'booked',
    width: 100,
  },
  {
    title: '操作',
    key: 'action',
    width: 100,
  },
];

// 房型数据
const roomData = ref([
  {
    key: '1',
    roomType: '不标准双床房',
    price: '320.01',
    originalPrice: '320.01',
    available: 29,
    oversell: 11,
    booked: 1,
    expanded: true,
  },
  {
    key: '2',
    roomType: '总统房',
    price: '320.01',
    originalPrice: '320.01',
    available: 10,
    oversell: 10,
    booked: 0,
    expanded: false,
  },
  {
    key: '3',
    roomType: '三人间',
    price: '320.06',
    originalPrice: '320.06',
    available: 0,
    oversell: 0,
    booked: 0,
    expanded: false,
  },
  {
    key: '4',
    roomType: '标间D',
    price: '320.07',
    originalPrice: '320.07',
    available: 0,
    oversell: 0,
    booked: 0,
    expanded: false,
  },
  {
    key: '5',
    roomType: '套间D',
    price: '320.00',
    originalPrice: '320.00',
    available: 0,
    oversell: 0,
    booked: 0,
    expanded: false,
  },
  {
    key: '6',
    roomType: '舒适大床房',
    price: '559.00',
    originalPrice: '559.00',
    available: 16,
    oversell: 10,
    booked: 0,
    expanded: false,
  },
  {
    key: '7',
    roomType: '豪华双床房',
    price: '320.00',
    originalPrice: '320.00',
    available: 1,
    oversell: 1,
    booked: 0,
    expanded: false,
  },
  {
    key: '8',
    roomType: '会议室',
    price: '320.00',
    originalPrice: '320.00',
    available: 5,
    oversell: 0,
    booked: 0,
    expanded: false,
  },
]);

// 切换房型展开状态
const toggleExpand = (record: any) => {
  record.expanded = !record.expanded;
};

// 选择房间
const selectRoom = (record: any) => {
  message.success(`已选择房型: ${record.roomType}`);
};

// 取消操作
const handleCancel = () => {
  message.info('已取消预订');
};

// 确认预订
const handleConfirm = () => {
  message.success('预订成功！');
};
</script>

<style scoped>
.quick-booking {
  padding: 24px;
}

.page-header {
  margin-bottom: 24px;
}

.booking-container {
  display: flex;
  gap: 24px;
}

.room-type-list {
  width: 300px;
  flex-shrink: 0;
}

.booking-form {
  flex: 1;
}

.room-list-card {
  height: fit-content;
}

.room-categories {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.category-item {
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 12px;
}

.category-item:last-child {
  border-bottom: none;
}

.category-title {
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
}

.room-codes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.room-code {
  background-color: #f5f5f5;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: #666;
}

.order-info-card,
.package-card,
.room-info-card {
  margin-bottom: 16px;
}

.package-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.package-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

.package-name {
  flex: 1;
  color: #333;
}

.package-price {
  color: #1890ff;
  font-weight: 500;
}

.room-type-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.expand-icon {
  cursor: pointer;
  color: #666;
  font-size: 12px;
}

.expand-icon:hover {
  color: #1890ff;
}

.price-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.price-main {
  color: #1890ff;
  font-weight: 500;
}

.price-original {
  color: #999;
  font-size: 12px;
  text-decoration: line-through;
}

.available-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.available-count {
  color: #52c41a;
  font-weight: 500;
}

.oversell-info {
  color: #faad14;
  font-size: 12px;
}

.action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

:deep(.ant-form-item-label > label) {
  font-weight: 500;
  color: #333;
}

:deep(.ant-table-thead > tr > th) {
  background-color: #fafafa;
  font-weight: 500;
}

:deep(.ant-table-tbody > tr > td) {
  padding: 8px 12px;
}
</style>
